<template>
  <a-layout-sider :collapsed="collapsed" collapsible :trigger="null" :class="['scroll-hide', 'window-side']">
    <div :class="['title',collapsed?'title-small':'']">{{lang=='CN'?menu.name:menu.path.toUpperCase()}}</div>
    <a-menu class="menu" mode="inline" :selectedKeys="[curr]">
      <a-menu-item v-for="(item,index) in menuList" :key="index" @click="btnClick(item.fullPath)">
        <a-icon :type="item.meta.icon" />
        <span>{{item.name}}</span>
      </a-menu-item>
    </a-menu>
  </a-layout-sider>
</template>
<script>
import {getI18nKey} from '@/utils/routerUtil'
export default {
  name: 'PageSider',
  props:['menu','lang','collapsed'],
  data () {
    return {
      curr:0,
      menuList: []
    }
  },
  watch:{
    lang(){
      this.initMenu()
    },
    '$route.path'(){
      this.initMenu()
    }
  },
  created () {
    this.initMenu()
  },
  methods: {
    btnClick(path){
      if(this.$router.currentRoute.fullPath!=path) this.$router.push(path);
    },
    initMenu(){
      this.menuList = this.menu.children.map((item,index)=>{
        if(this.$route.path==item.fullPath) this.curr=index
        item.name = this.$t(getI18nKey(item.fullPath))
        return item;
      });
    }
  }
}
</script>
<style lang="less" scoped>
  .window-side{
    background-color: @base-bg-color;
    z-index: 9;
    overflow: auto;
    height: 100vh; 
    position: fixed; 
    left: 0;
    .menu{
      background-color: @base-bg-color;
    }
    .title{
      text-align: center;
      font-size: 24px;
      margin: 8px 0 12px 0;
      cursor: default;
    }
    .title-small{
      font-size: 14px;
    }
  }
</style>